<template>
  <div>
    <el-container>
      <el-asid class="el-asid">
        <div style="height: 70px;color:#fff; display:flex; align-items:center;justify-content:center">
          <span>北京114后台管理端</span>
        </div>
        <el-menu
            active-text-color="#ffd04b"
            background-color="#001529"
            class="el-menu-vertical-demo"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
            :default-active="$route.path"
            router
        >
          <el-menu-item index="/admin/index">
            <i class="el-icon-s-home"></i>
            <span slot="title">系统首页</span>
          </el-menu-item>
          <el-menu-item index="/admin/usermanage">
            <el-icon>
              <icon-menu/>
            </el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/hosmanage">
            <el-icon>
              <icon-menu/>
            </el-icon>
            <span>医院管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/DepartmentAndSpecializedGroup">
            <el-icon>
              <icon-menu/>
            </el-icon>
            <span>科室和专科组管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/Announcement">
            <el-icon>
              <icon-menu/>
            </el-icon>
            <span>公告发布</span>
          </el-menu-item>
          <el-menu-item index="/admin/adminmanage" v-if="user.permission == 0">
              <el-icon>
                <icon-menu/>
              </el-icon>
              <span>管理员管理</span>
          </el-menu-item>

        </el-menu>
      </el-asid>

      <!-- 右边区域 -->
      <el-container>
        <!-- 头部 -->
        <el-header>
          <div style=" display:flex; align-items:center;width:100px ;height:60px; float: left">
            <span style=" float :left ;">
              <i class="el-icon-s-fold" style=" font-size: 25px; padding-right: 20px"></i>
            </span>
            <span style="float:right">系统管理员</span>
          </div>
          <div style="float: right ; height:60px; display: flex; align-items: center ">
            <el-dropdown>
              <span class="el-dropdown-link">
                 {{user.name}}
                  <el-icon class="el-icon--right">
                    <arrow-down/>
                 </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 内容区域 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
//elementPlus组件内容
import {ArrowDown} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";
import router from "@/router/index.js";
import axios from "axios";
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
//==================================================
const user = ref({})
onMounted(()=>{
  user.value = JSON.parse(sessionStorage.getItem("user"))
})

const logout = ()=>{
  sessionStorage.removeItem("adminToken")
  sessionStorage.removeItem("user")
  ElMessage.success("退出成功")
  router.push({
    path:'/login'
  })
}
</script>

<style scoped>
.el-asid {
  width: 170px;
  transition: all 2s;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  min-height: 900px;
  background-color: #001529;
}

.el-header {
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
}

.el-main {
  padding: 10px;
  box-sizing: border-box;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.el-dropdown{
  cursor: pointer;
}
</style>
